<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '选择年龄/身高/体重',
  },
}
</route>

<template>
  <view class="absolute left-0 right-0"
    :style="{ top: '0', bottom: bottom + 'px' }"
  >
    <view 
      class="rounded-12rpx w-center m-a bg-#fff !mt-32rpx" 
      style="height: calc(100% - 200rpx);"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    >
      <view class="font-size-26rpx pt-32rpx pb-20rpx">当前选择</view>
      <view class="font-size-32rpx font-600 pb-20rpx text-center">
        <text v-if="startNum">从{{ startNum }}{{ typeOptions[type].unit }}到{{ endNum }}{{ typeOptions[type].unit }}</text>
        <text v-else>不限{{ typeOptions[type].title }}</text>
      </view>
      <view class="border-1px"></view>

      <view class="flex py-32rpx relative" style="height: calc(100% - 324rpx);">
        <view class="border-center"></view>
        <scroll-view 
          class="w-1/2 box-border h-full" 
          :scroll-y="true" 
          :show-scrollbar="false"
          :scroll-top="startScrollTop"
          :scroll-with-animation="true"
        >
          <view class="w-200rpx min-h-30px m-a flex-center leading-28rpx font-size-26rpx rounded-8rpx mb-12px flex-wrap box-border p-6rpx text-center"
            v-for="item in startList"
            :key="item"
            :class="[{ 'selected': item === startNum }]"
            @click="handleChangePicker(item)"
          >
            {{ item }}{{ typeOptions[type].unit }}
          </view>
        </scroll-view>
        
        <scroll-view 
          class="w-1/2 box-border h-full" 
          :scroll-y="true" 
          :show-scrollbar="false"
          :scroll-top="endScrollTop"
          :scroll-with-animation="true"
        >
          <view class="w-200rpx min-h-30px m-a flex-center leading-28rpx font-size-26rpx rounded-8rpx mb-12px flex-wrap box-border p-6rpx text-center"
            v-for="item in endList"
            :key="item"
            :class="[{ 'selected': item === endNum }]"
            @click="handleChangePicker(item, 'endNum')"
          >
            {{ item }}{{ typeOptions[type].unit }}
          </view>
        </scroll-view>
      </view>
      <view class="text-center mt-32rpx">
        <wd-checkbox :modelValue="isLimit" shape="square" @change="handleChange">不限{{ typeOptions[type].title }}</wd-checkbox>
      </view>
    </view>

    <view class="position-b-center !fixed w-750rpx m-a pt-24rpx bg-#fff box-sd"
      :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    >
      <view class="btn-full w-center">
        <wd-button 
          class="btn-w-full btn-h-78"
          @click="submit"
        >确定</wd-button>
      </view>
      <view class="pb-24rpx"></view>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { useThemeStore } from "@/store";
import { back } from "@/utils";
import { useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const toast = useToast();

const safeTop = safeAreaInsets?.top || 0;
const safeBottom = safeAreaInsets?.bottom || 0;
const top = ref(safeTop);
const bottom = ref(safeBottom);
// #ifdef MP-WEIXIN
top.value = safeTop + 44;
// #endif

const type = ref('age');
const typeOptions = reactive({
  age: {
    title: '年龄',
    initStartNum: 18,
    initEndNum: 99,
    unit: '岁',
  },
  height: {
    title: '身高',
    initStartNum: 140,
    initEndNum: 220,
    unit: 'cm',
  },
  weight: {
    title: '体重',
    initStartNum: 30,
    initEndNum: 200,
    unit: 'kg',
  },
})

// 当前开始值
const startNum = ref(0);
// 当前结束值
const endNum = ref(0);

// 开始数组
const startList = ref([]);
// 结束数组
const endList = computed(() => {
  return startList.value.filter(item => item >= startNum.value);
})

const pageType = ref('');
onLoad((options) => {
  const { data, type: _type, page } = options || {};
  pageType.value = page || '';
  type.value = _type || 'age';
  // 重置开始数组
  resetStartList();
  // 回填
  backfill(data);
})

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    const { title = '年龄' } = typeOptions[type.value];
    themeConfig.title = '选择' + title;
  })
})

// 开始值的滚动高度
const startScrollTop = ref(0);
// 结束值的滚动高度
const endScrollTop = ref(0);
// 回填数据
const backfill = (data = '') => {
  if (!data) return;
  const { initStartNum, initEndNum } = typeOptions[type.value];
  
  const [_startNum, _endNum] = data.split(',');
  startNum.value = _startNum ? Number(_startNum) : initStartNum;
  endNum.value = _endNum ? Number(_endNum) : initEndNum;

  // 滚动到顶部
  setTimeout(() => {
    startScrollTop.value = (startNum.value - initStartNum) * 42;
    endScrollTop.value = (endNum.value - endList.value[0]) * 42;
  }, 100)
}

// 提交
const submit = () => {
  if (!startNum.value && endNum.value) {
    return toast.show('请选择开始值');
  }
  const _data = {
    type: type.value,
    dataList: [startNum.value, endNum.value]
  }
  uni.$emit(`updateRange${pageType.value}`, JSON.stringify(_data));
  back();
}

// 是否不限
const isLimit = computed(() => {
  return !(startNum.value || endNum.value)
})
// 点击是否不限
const handleChange = () => {
  startNum.value = 0;
  endNum.value = 0;
}

// 点击选择
const handleChangePicker = (item, _type = 'startNum') => {
  const { initEndNum } = typeOptions[type.value];

  // 点击开始值
  if (_type === 'startNum') {
    // 当选择的年龄大于结束年龄，则结束年龄自动设置为选择的年龄加10岁
    if (item > endNum.value) {
      const _val = item + 10;
      endNum.value = _val > initEndNum ?  initEndNum : _val;
    }
    startNum.value = item;
    return;
  }

  // 点击结束值
  endNum.value = item;
}

// 初始化开始数组
const resetStartList = () => {
  const { initStartNum, initEndNum } = typeOptions[type.value];
  for (let i = initStartNum; i <= initEndNum; i++) {
    startList.value.push(i);
  }
}
</script>

<style lang="scss" scoped>
.selected {
  color: #fff;
  background: linear-gradient( 180deg, #9C6DEF 0%, #E5C4FF 100%);
}

.border-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(0.5);
  width: 1px;
  height: calc(100% - 64rpx);
  background-color: rgba(187, 187, 187, 0.6);
}
</style>
          